<template>
  <div>{{ cValue }}=</div>
</template>
<script setup lang="ts">
  import { defHttp } from '@/utils/http/axios';
  import { computed, onMounted, ref } from 'vue';

  const props = defineProps({
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    value: {
      // 值
      type: [String, Number, Array],
    },
    split: {
      // 分割符
      type: String,
      default: ',',
    },
    join: {
      // 连接符
      type: String,
      default: ',',
    },
    api: {
      // 接口请求对象
      type: [Function, String] as PropType<((...arg: any) => Promise<any>) | String>,
      default() {
        return () => {
          return new Promise((resolve) => {
            resolve([]);
          });
        };
      },
    },
    params: {
      type: Object,
      default() {
        return {};
      },
    },
    cacheKey: {
      type: String,
      default: '',
    },
    requestMethod: {
      type: String,
      default: 'post',
    },
    valueField: {
      type: String,
      default: 'id',
    },
    labelField: {
      type: String,
      default: 'name',
    },
  });
  const currentData = ref({});
  const cValue = computed(() => {
    return (currentData.value as any)[props.labelField] || props.value;
  });
  onMounted(() => {
    let api: (...arg: any) => Promise<any>;
    if (typeof props.api === 'string') {
      api = (params: any) => {
        return defHttp[props.requestMethod]({ url: props.api as string, params });
      };
    } else {
      api = props.api as (...arg: any) => Promise<any>;
    }
    api({
      ...props.params,
      [`m_EQ_${props.valueField}`]: props.value,
    }).then((res) => {
      if (res.length) {
        currentData.value = res[0];
      }
    });
  });
</script>
<style lang="less" scoped></style>
